<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('付款')">

</head>

<body>

<div th:replace="head :: header"></div>

<!-- 主体内容 -->
<div id="app">
    <div class="user_container clearfix">

        <!-- 面包屑导航 -->
        <div class="crumbs_nav">
            <a href="javascript:void(0)" class="on">微信支付</a>
        </div>

        <div class="right_boxwrap order_boxwrap">
            <div class="user_right_box">
                <div class="user_right_box_title">
                    <div class="user_right_box_title_l">
                        <em></em>
                        <h3>微信扫码支付</h3>
                    </div>
                </div>
                <div class="user_info order_info">
                    <form th:action="@{/order/pay}" method="post">
                        <div class="middle">
                            <div class="middle_box">
                                <div class="middle_box_title">
                                    <h3>订单信息</h3>
                                </div>
                                <div class="middle_box_con paymen_info">

                                </div>
                            </div>

                            <div class="middle_box">
                                <section class="container">
                                    <div class="wx-zf-box">
                                        <div class="wx-erm-box tac">
                                            <span id="sourceqrcode" class="QRcode" style="display: none;"></span>
                                            <div id="qrcode" class="QRcode"></div>
                                        </div>
                                        <div class="mt30">
                                            <p class="hLh30 tac fsize14 f-fM c-666">请使用微信扫描二维码以完成支付</p>
                                            <p class="hLh30 tac fsize14 f-fM c-666 mt30">
                                                <span class="disIb fsize14 c-666 f-fM">您现在可以：</span>
                                                <a href="javascript:window.history.back()"
                                                   class="disIb fsize14 c-666 f-fM"><u>返回修改支付方式</u></a>
                                            </p>
                                        </div>
                                    </div>
                                </section>
                            </div>

                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>

</div>


<!-- 版权信息 -->
<div th:replace="foot :: body"></div>

</body>

<script th:src="${#request.getAttribute('ctx') + '/static/front/js/home.js'}" type="text/javascript" charset="utf-8"></script>
<script th:src="${#request.getAttribute('ctx') + '/static/common/jquery.qrcode.min.js'}" type="text/javascript"
        charset="UTF-8"></script>
<script th:src="${#request.getAttribute('ctx') + '/static/common/canvas2image.js'}" type="text/javascript"
        charset="UTF-8"></script>

<script th:inline="javascript">
    var link = [[${wxPayUrl}]];
    var timeCheck;
    $(function () {
        try {
            //默认字符串转二维码的方法，仅支持html5
            document.createElement('canvas').getContext('2d');
            $('#sourceqrcode').qrcode({render: "canvas", height: 360, width: 360, correctLevel: 0, text: link});
        } catch (e) {
            //如果不支持html5报错后通过table生成二维码
            $('#sourceqrcode').qrcode({render: "table", height: 360, width: 360, correctLevel: 0, text: link});
        }
        canvasToImage();
        timeCheck = setInterval("reviewOrder()", 3000);
    })

    /**
     * 检查订单是否支付成功
     */
    function reviewOrder() {
        $.ajax({
            type: 'post',
            url: '/order/review/' + [[${orderNo}]],
            data: {
                orderNo: [[${orderNo}]],
                type: [[${type}]]
            },
            dataType: 'json',
            beforeSend: function (xhr) {
                xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
            },
            success: function (result) {
                if (result.status == Messages.HTTP_STATUS.SUCCESS && result.data == true) {
                    window.location.href = '/order/get/' + [[${orderId}]];
                } else {

                }
            }
        });
    }

    /**
     * canvas转图片
     */
    function canvasToImage() {
        var $imgs = document.getElementById('qrcode');
        var w = $("#sourceqrcode").width();
        var h = $("#sourceqrcode").height();
        $imgs.appendChild(Canvas2Image.convertToImage($("canvas")[0], w, h, "png"));
    }


    /**
     * 微信内置 WeixinJSBridge 支付
     */
    function onBridgeReady() {
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                appId: [[${appId}]],     //公众号名称，由商户传入
                timeStamp: [[${timeStamp}]],
                nonceStr: [[${nonceStr}]],
                package: [[${info_package}]],
                signType: "MD5",
                paySign: [[${paySign}]]
            },
            function (res) {
                if (res.err_msg == "get_brand_wcpay_request：ok") {

                }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
            }
        );
    }

    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
    } else {
        if ([[${appId}]] != null && [[${appId}]] != '') {
            onBridgeReady();
        }
    }
</script>
</html>
